<template>
  <div class="datetime">
    <van-cell-group title="基础展示" inset>
      <van-cell
        title="选择年月日"
        clickable
        @click="onOpenPicker('visible')"
        :value="dateOne"
      />
      <van-cell
        title="日期默认值"
        clickable
        @click="onOpenPicker('visibleTwo')"
        :value="dateTow"
      />
      <van-cell
        title="今日为起始日期"
        clickable
        @click="onOpenPicker('visibleThree')"
        :value="dateThree"
      />
      <van-cell
        title="自定义返回格式"
        clickable
        @click="onOpenPicker('visibleFour')"
        :value="dateFour"
      />
    </van-cell-group>
    <datetime-picker
      :visible="visible"
      @cancel="onCancel('visible')"
      v-model="dateOne"
    ></datetime-picker>
    <datetime-picker
      :visible="visibleTwo"
      currentDate="2016-6-18"
      @cancel="onCancel('visibleTwo')"
      v-model="dateTow"
    ></datetime-picker>
    <datetime-picker
      :visible="visibleThree"
      :maxDate="maxDate"
      :minDate="minDate"
      @cancel="onCancel('visibleThree')"
      v-model="dateThree"
    ></datetime-picker>
    <datetime-picker
      :visible="visibleFour"
      :formatter="formatter"
      @cancel="onCancel('visibleFour')"
      v-model="dateFour"
    ></datetime-picker>
  </div>
</template>

<script>
import datetimePicker from "../components/XrkDatetimePicker/index.vue";
export default {
  name: "datatimePicker-test",
  components: {
    datetimePicker,
  },
  data() {
    return {
      visible: false,
      visibleTwo: false,
      visibleThree: false,
      visibleFour: false,
      minDate: new Date(),
      maxDate: new Date(2040, 11, 31),
      dateOne: "",
      dateTow: "",
      dateThree: "",
      dateFour: "",
    };
  },
  methods: {
    onOpenPicker(type) {
      this[type] = true;
    },
    onCancel(type) {
      this[type] = false;
    },
    formatter(year, month, day) {
      return new Date(year, month, day).getTime();
    },
  },
};
</script>
